<template>
	<up-popup :show="isFeedback" round="10">
		<view class="feedback-box">
			<view class="u-flex u-flex-center u-flex-items-center title">
				<text class="y-f-w-bold">提交反馈</text>
				<view class="close-box" @click.stop="hind">
					<up-icon name="close" color="#999" size="20"></up-icon>
				</view>
			</view>


			<view class="u-p-30 u-p-t-0">
				<up-form labelPosition="top" label-width="160">
					<up-form-item label="反馈原因">
						<view class="u-flex u-flex-wrap tags">
							<view :class="['item',{'cur':item === feedbackForm.reason}]" v-for="item in reasonList"
								:key="item" @click.stop="chooseReason(item)">{{item}}</view>
						</view>
					</up-form-item>

					<up-form-item label="反馈内容">
						<textarea class="u-border" v-model="feedbackForm.desc" placeholder="请输入反馈内容"></textarea>
					</up-form-item>

					<up-form-item>
						<up-button text="提交" color="#1269db"></up-button>
					</up-form-item>
				</up-form>
			</view>
		</view>
	</up-popup>
</template>

<script>
	export default {
		name: "yFeedback"
	}
</script>
<script setup>
	import {
		ref,
		reactive
	} from "vue";
	let isFeedback = ref(false)

	// 反馈
	let feedbackForm = reactive({
		reason: '',
		desc: ''
	})

	// 反馈原因
	const reasonList = reactive(['错别字', '答案有误', '排版有误', '图片有误', '其他'])
	const chooseReason = (item) => {
		feedbackForm.reason = item
	}
	
	// 打开
	const open = (e) => {
		isFeedback.value = true
	}
	
	// 关闭
	const hind = (e) => {
		isFeedback.value = false
		reset()
	}
	
	// 重置
	const reset = () => {
		Object.assign(feedbackForm, {
			reason: '',
			desc: ''
		})
	}
	
	// 提交
	const submit = () => {
		console.log('submit');
	}
	
	// 暴露方法属性供组件实例使用
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		width: 100%;
		height: 100rpx;

		.close-box {
			position: absolute;
			right: 30rpx;
		}
	}

	.tags {
		.item {
			margin-top: 20rpx;
			margin-right: 20rpx;
			min-width: 160rpx;
			height: 60rpx;
			padding: 0 20rpx;
			border: 1px solid #ddd;

			text-align: center;
			line-height: 60rpx;
			border-radius: 10rpx;
		}

		.cur {
			color: $uni-color-primary;
			background: rgba($uni-color-primary, .3);
			border-color: $uni-color-primary;
		}
	}

	textarea {
		width: 100%;
		height: 260rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}
</style>